<template>
	<tepmlate v-if="loding">
		<skeleton></skeleton>
	</tepmlate>

	<view v-else class="layout">

		<!-- 轮播图 -->
		<view class="banner">
			<uni-swiper-dot :info="data.bannerList" :current="current" mode='default' :dots-styles="dotsStyles">
				<swiper @change='swiperChange' class="swiper" :autoplay="true" :interval="2000" :duration="1000"
					circular>
					<swiper-item class="swiper-item" v-for="item in data.bannerList" :key="item.id">
						<navigator url="/modules/goodModule/pages/goods/list/list">
							<image :src="item.imageUrl" mode="scaleToFill"></image>
						</navigator>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>

		</view>

		<!-- 导航 -->
		<view class="entrance">
			<view class="layout">
				<view class="entrance-item" v-for="item in data.categoryList" :key="item.id">
					<navigator class="navigator"
						:url="`/modules/goodModule/pages/goods/list/list?category1Id=${item.id}`">
						<image :src="item.imageUrl" mode="scaleToFill"></image>
						<view class="text">
							{{item.name}}
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<!-- 广告 -->
		<view class="adver">
			<view class="grid" v-for="item in data.activeList" :key="item.id">
				<navigator class="navigator"
					:url="`/modules/goodModule/pages/goods/list/list?category2Id=${item.category2Id}`">
					<image :src="item.imageUrl" mode=""></image>
				</navigator>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="good_list">
			<good-list title='猜你喜欢' :list='data.guessList'></good-list>
			<good-list title='人气推荐' :list='data.hotList'></good-list>
		</view>
	</view>
</template>

<script setup>
	import instance from "@/utils/http.js"
	import { reqIndexData } from '@/api/index.js'
	import skeleton from './skeleton/index_skeleton.vue'

	let loding = ref(true) // 骨架屏，最初的加载
	let current = ref(0) // 当前轮播图指示点索引
	let dotsStyles = ref({
		width: 10,
		backgroundColor: 'rgba(239, 7, 23, 0.3)',
		border: '1px rgba(0, 0, 0, .3) solid',
		selectedBackgroundColor: 'rgba(239, 7, 23, 0.8)',
		selectedBorder: '1px rgba(0, 0, 0, .9) solid',
	}) // 轮播图指示点样式
	let data = reactive({
		bannerList: [], // 轮播图
		categoryList: [], //商品导航
		activeList: [], // 活动渲染区域
		hotList: [], // 人气推荐
		guessList: [], // 猜你喜欢
	})

	// 获取首页数据
	const getIndexData = async () => {
		let reslove = await reqIndexData()
		data.bannerList = reslove[0].data
		data.categoryList = reslove[1].data
		data.activeList = reslove[2].data
		data.guessList = reslove[3].data
		data.hotList = reslove[4].data

		loding.value = false
	}

	// 当前轮播图的index
	const swiperChange = (e) => {
		current.value = e.detail.current
	}

	onLoad(() => {
		getIndexData()
	})
</script>

<style lang='scss' scoped>
	.layout {
		width: 100vw;
		height: 100vh;
		padding: 16rpx;

		.banner {

			.swiper {
				width: 100%;
				height: 360rpx;
				border-radius: 16rpx;
				overflow: hidden;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
					}
				}


			}


		}

		.entrance {
			width: 100%;
			height: 360rpx;
			border-radius: 16rpx;
			margin-top: 30rpx;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

			.layout {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

				.entrance-item {
					width: 123rpx;
					height: 120rpx;

					.navigator {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}

						.text {
							font-size: 30rpx;
							line-height: 30rpx;
							font-weight: 10rpx;
						}
					}
				}
			}
		}

		.adver {
			width: 100%;
			margin-top: 50rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding: 15rpx;
			overflow: hidden;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15rpx;

			.grid {
				width: 100%;
				height: 220rpx;
				border-radius: 16rpx;

				.navigator {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&:first-child {
					grid-row: 1/3;
					height: 100%;
				}
			}
		}

		.good_list {
			width: 100%;
		}
	}
</style>